<template>
  <div>
    <el-tree
      ref="treeRef"
      :data="data.list"
      show-checkbox
      node-key="data.roleId"
      :check-strictly="true"
      :default-checked-keys="params.authority"
      :props="{
        children: 'roleList',
        label: 'name',
      }"
    />
    <el-button @click="changeAuthority">确认修改</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { InitData } from '../type/authority'
import { getAuthorityList } from '../request/api'
const route = useRoute()
const params: any = route.params
const data = reactive(new InitData(params.id, params.authority))
onMounted(() => {
  getAuthorityList().then((res) => {
    console.log(res)
    data.list = res.data
  })
})
const changeAuthority = () => {
  // console.log(
  //   data.treeRef.getCheckedKeys().sort(function (a: number, b: number) {
  //     return a - b
  //   })
  // )
  console.log(data.treeRef)
  // 传给后台, 后台去进行修改
}
</script>

<style scoped></style>
